<template>
	<view class="u-page fullpage" :style="skin">
		<view class="top-warp"><zx-nav title="供应商"></zx-nav></view>
		<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :up="upOption" :top="topH" @down="downCallback" @up="upCallback">
			<!-- 数据列表 -->
			<view class="main">
				<view class="shop-item card " :style="{ marginBottom: mt }" v-for="(info, index) in supplierlist" :key="index">
					<view class="shop-info flex align-center">
						<div class="imgbox"><image :src="`${info.supplier_img}?imageView2/0/w/140`" mode="widthFix"></image></div>
						<view class="u-flex-1">
							<view class="name">{{ info.supplier_name }}</view>
							<view class="flex mt15 "><image class="shop-tag" :src="tag.img_url" mode="heightFix" v-for="(tag, index) in info.supplier_lable" :key="index"></image></view>
						</view>
						<view class="btn u-button--success" @tap="navTo(`/pages/shop/shop?id=${info.id}`)">进入店铺</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import shopItem from '@/components/shop-item';
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { mapState } from 'vuex';
export default {
	mixins: [MescrollMixin],
	data() {
		return {
			supplierlist: [],
			upOption: {
				page: {
					num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					size: 10 // 每页数据的数量
				}
			}
		};
	},
	components: {
		shopItem
	},
	computed: {
		...mapState(['CustomBar']),
		topH() {
			return this.CustomBar + uni.upx2px(20) + 'px';
		}
	},
	methods: {
		/*上拉加载的回调*/
		upCallback(mescroll) {
			this.getHomesupplier();
		},
		downCallback(mescroll) {
			this.mescroll.resetUpScroll();
		},
		getHomesupplier() {
			let $me = this;
			let pageNum = this.mescroll.num; // 页码, 默认从1开始
			let pageSize = this.mescroll.size;
			let param = {
				page: pageNum,
				limit: pageSize
			};
			this.$postAction(this.$api.getHomesupplier, param).then(da => {
				if ($me.mescroll.num == 1) {
					this.supplierlist = [];
				}
				if (da.code == 0 && da.data && da.data.length > 0) {
					let curPageData = da.data;
					$me.mescroll.endBySize(curPageData.length, da.count);
					$me.supplierlist = $me.supplierlist.concat(curPageData); //追加新数据
				} else {
					$me.mescroll.endSuccess(0, false);
				}
			});
		},
		navTo(url, type) {
			if (!type) {
				type = 'navigateTo';
			}
			uni[type]({
				url: url
			});
		}
	}
};
</script>

<style lang="scss">
.top-warp {
	z-index: 9990;
	position: fixed;
	top: --window-top;
	/* css变量 */
	left: 0;
	width: 100%;
	background-color: white;
}
.shop-item {
	padding: 20upx;
	margin-bottom: 20upx;
	.shop-info {
		color: #646464;
		font-size: 24upx;
		line-height: 33upx;
		.imgbox {
			width: 140upx;
			height: 140upx;
			margin-right: 28upx;
			border-radius: 100%;
			overflow: hidden;
			position: relative;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.name {
			color: #000;
			font-size: 32upx;
			font-weight: 500;
			line-height: 45upx;
		}
		.btn {
			width: 170upx;
			height: 64upx !important;
			text-align: center;
			line-height: 64upx;
			border-radius: 35upx;
			font-weight: 500;
			font-size: 28upx;
		}
	}
	.shop-tag {
		height: 32upx;
		margin: 0 6rpx;
	}
}
</style>
